'use client';

import React, { useState } from 'react';
import { Form, Button, Space } from 'antd';
import FileUpload, { FileValue } from './index';

const FileUploadTest: React.FC = () => {
  const [form] = Form.useForm();
  const [testValue, setTestValue] = useState<FileValue | undefined>({
    fileKey: 'test-key-123',
    fileUrl: 'https://via.placeholder.com/200x200?text=Test+Image'
  });

  const handleSubmit = () => {
    const values = form.getFieldsValue();
    console.log('表单值:', values);
    console.log('测试值:', testValue);
  };

  const handleReset = () => {
    form.resetFields();
    setTestValue(undefined);
  };

  return (
    <div style={{ padding: '20px', maxWidth: '600px' }}>
      <h2>FileUpload 组件测试</h2>
      
      <Form form={form} layout="vertical">
        <Form.Item label="表单中的文件上传" name="formFile">
          <FileUpload placeholder="点击上传文件" />
        </Form.Item>
        
        <Form.Item label="受控的文件上传">
          <FileUpload 
            value={testValue}
            onChange={setTestValue}
            placeholder="点击上传文件"
          />
        </Form.Item>
        
        <Form.Item>
          <Space>
            <Button type="primary" onClick={handleSubmit}>
              获取表单值
            </Button>
            <Button onClick={handleReset}>
              重置
            </Button>
          </Space>
        </Form.Item>
      </Form>
      
      <div style={{ marginTop: '20px', padding: '10px', background: '#f5f5f5' }}>
        <h4>当前测试值:</h4>
        <pre>{JSON.stringify(testValue, null, 2)}</pre>
      </div>
    </div>
  );
};

export default FileUploadTest;
